<template>
  <view class="">
    <view class="button1" @click="createCanvasImage">
      分享
    </view>

    <!-- 海报容器 start -->
    <view class="shade" v-if="shade" @click="shade = false">
      <image class="img_src" @click.stop :src="canvasToTempFilePath" :show-menu-by-longpress="true" mode="widthFix"></image>
      <view class="button" @click.stop>
        <view class="cancel" @click="shade = false">
          取消
        </view>
        <!-- #ifdef H5 -->
        <view class="submit" @click="downLoadBtn()">
          保存图片
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="submit" @click="saveShareImg(canvasToTempFilePath)">
          保存图片
        </view>
        <!-- #endif -->
      </view>
    </view>
    <!-- 海报容器 end -->

    <!-- 海报样式 start h5 -->
    <!-- <view class="poster">
      <view class="top">
        <view class="top_left">
          <image src="@/static/img/buycard3.jpg" mode=""></image>
        </view>
        <view class="top_right">
          <h3>名字</h3>
          <h4>内容内容内容</h4>
        </view>
      </view>
      <view class="center">
        <image src="@/static/img/buycard3.jpg" mode=""></image>
      </view>
      <view class="content">
        内容内容内容
      </view>
      <view class="bottom">
        <view class="top_left">
          <image src="@/static/img/buycard3.jpg" mode=""></image>
        </view>
        <view class="top_right">
          <h3>内容内容内内容内容内容内容内容内容内容内容内容容</h3>
        </view>
      </view>
    </view> -->
    <!-- 海报样式 end h5 -->
    <!-- 海报小程序 start -->
    <canvas canvas-id="myCanvas" style="width: 690px;height:1040px; position: fixed;top: -10000px;"></canvas>
    <!-- 海报小程序 end -->
  </view>
</template>

<script>
  // import html2canvas from 'html2canvas'; // 引入 html2canvas
  export default {
    data() {
      return {
        base64: '',
        ratio: 1,
        name: '你瞅啥',
        content: '内容内容内荣',
        ctx: null, // 创建canvas对象
        canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
        openStatus: true, // 声明一个全局变量判断是否授权保存到相册
        shade: false, // 图片的显示和隐藏
      }
    },
    methods: {
      // 保存到系统相册
      saveShareImg(canvasToTempFilePath) {
        let self = this;
        // 数据埋点点击保存海报
        self.saveId = '保存学情海报';
        // 获取用户是否开启用户授权相册
        if (!self.openStatus) {
          wx.openSetting({
            success: result => {
              if (result) {
                if (result.authSetting['scope.writePhotosAlbum'] === true) {
                  self.openStatus = true;
                  wx.saveImageToPhotosAlbum({
                    filePath: canvasToTempFilePath,
                    success() {
                      self.showShareImg = false;
                      wx.showToast({
                        title: '图片保存成功，快去分享到朋友圈吧~',
                        icon: 'none',
                        duration: 2000
                      });
                    },
                    fail() {
                      wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                      });
                    }
                  });
                }
              }
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          wx.getSetting({
            success(res) {
              // 如果没有则获取授权
              if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                    self.openStatus = true;
                    wx.saveImageToPhotosAlbum({
                      filePath: canvasToTempFilePath,
                      success() {
                        self.showShareImg = false;
                        wx.showToast({
                          title: '图片保存成功，快去分享到朋友圈吧~',
                          icon: 'none',
                          duration: 2000
                        });
                      },
                      fail() {
                        wx.showToast({
                          title: '保存失败',
                          icon: 'none'
                        });
                      }
                    });
                  },
                  fail() {
                    // 如果用户拒绝过或没有授权，则再次打开授权窗口
                    self.openStatus = false;
                    console.log('请设置允许访问相册');
                    wx.showToast({
                      title: '请设置允许访问相册',
                      icon: 'none'
                    });
                  }
                });
              } else {
                // 有则直接保存
                self.openStatus = true;
                wx.saveImageToPhotosAlbum({
                  filePath: canvasToTempFilePath,
                  success() {
                    self.showShareImg = false;
                    wx.showToast({
                      title: '图片保存成功，快去分享到朋友圈吧~',
                      icon: 'none',
                      duration: 2000
                    });
                  },
                  fail() {
                    wx.showToast({
                      title: '保存失败',
                      icon: 'none'
                    });
                  }
                });
              }
            },
            fail(err) {
              console.log(err);
            }
          });
        }
      },
      // 生成海报
      createCanvasImage() {
        let self = this;
        // 点击生成海报数据埋点
        if (!self.ctx) {
          let codeUrl = 'https://img2.baidu.com/it/u=859882613,1564073189&fm=26&fmt=auto';
          let coverUrl = 'https://img2.baidu.com/it/u=859882613,1564073189&fm=26&fmt=auto';
          let headUrl = 'https://img2.baidu.com/it/u=859882613,1564073189&fm=26&fmt=auto';
          wx.showLoading({
            title: '生成中...'
          });
          let code = new Promise(function(resolve) {
            uni.getImageInfo({
              src: codeUrl,
              success: function(res) {
                resolve(res.path);
                console.log(res.path,1111)
              },
              fail: function(err) {
                console.log(err);
                wx.showToast({
                  title: '网络错误请重试',
                  icon: 'loading'
                });
              }
            });
          });

          let cover = new Promise(function(resolve) {
            uni.getImageInfo({
              src: coverUrl,
              success: function(res) {
                resolve(res.path);
              },
              fail: function(err) {
                console.log(err);
                wx.showToast({
                  title: '网络错误请重试',
                  icon: 'loading'
                });
              }
            });
          });

          // 头像
          let headImg = new Promise(function(resolve) {
            uni.getImageInfo({
              src: headUrl,
              success: function(res) {
                resolve(res.path);
              },
              fail: function(err) {
                console.log(err);
                wx.showToast({
                  title: '网络错误请重试',
                  icon: 'loading'
                });
              }
            });
          });

          Promise.all([headImg, code, cover]).then(function(result) {
            const ctx = wx.createCanvasContext('myCanvas');
            console.log(ctx, self.ratio, 'ctx');
            let canvasWidthPx = 690 * self.ratio,
              canvasHeightPx = 1040 * self.ratio,

              avatarurl_width = 110, //绘制的头像宽度
              avatarurl_heigth = 110, //绘制的头像高度
              avatarurl_x = 95, //绘制的头像在画布上的位置
              avatarurl_y = 35, //绘制的头像在画布上的位置

              codeurl_width = 180, //绘制的二维码宽度
              codeurl_heigth = 180, //绘制的二维码高度
              codeurl_x = 70, //绘制的二维码在画布上的位置
              codeurl_y = 800, //绘制的二维码在画布上的位置

              coverurl_width = 610, //绘制的封面宽度
              coverurl_heigth = 550, //绘制的封面高度
              coverurl_x = 40, //绘制的封面在画布上的位置
              coverurl_y = 190; //绘制的封面在画布上的位置

            ctx.drawImage('/static/img/buycard3.jpg', 0, 0, 690, 1040); // 背景图片需要本地

            // 白底
            // ctx.setFillStyle('#ffffff')
            // ctx.fillRect(25, 175, 640, 840)

            ctx.save(); // 先保存状态 已便于画完圆再用
            ctx.beginPath(); //开始绘制
            //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
            ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0,
              Math.PI * 2, false);
            ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
            ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

            ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制

            ctx.font = 'normal bold 40px sans-serif';
            ctx.setFillStyle('#666666'); // 文字颜色
            ctx.fillText(self.name, 240, 85); // 绘制文字

            ctx.setFillStyle('#666666'); // 文字颜色
            ctx.setFontSize(30); // 文字字号
            ctx.fillText(self.content, 240, 130); // 绘制文字

            ctx.font = 'normal normal 26px sans-serif';
            ctx.setFillStyle('#666666'); // 文字颜色
            ctx.fillText(self.content, 40, 640); // 绘制文字

            ctx.fillText('自有考场自有考场自有考场自有考场自有', 55, 770); // 绘制文字

            ctx.font = 'normal normal 24px sans-serif';
            ctx.setFillStyle('#000000'); // 文字颜色
            ctx.fillText('长按识别长按识别长按识别长按', 300, 880); // 绘制孩子百分比

            ctx.font = 'normal normal 24px sans-serif';
            ctx.setFillStyle('#000000'); // 文字颜色
            ctx.fillText('小程序码', 300, 910); // 绘制孩子百分比

            // ctx.font = 'normal normal 36px sans-serif';
            // ctx.setFillStyle('#222222'); // 文字颜色
            // ctx.fillText('查看驾校详细信息', 300, 950); // 绘制孩子百分比

            ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth); // 绘制封面
            ctx.drawImage(result[1], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制头像
            ctx.draw(false, function() {
              // canvas画布转成图片并返回图片地址
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function(res) {
                  self.canvasToTempFilePath = res.tempFilePath;
                  self.shade = true;
                  console.log(res.tempFilePath, 'canvasToTempFilePath');
                  wx.showToast({
                    title: '绘制成功'
                  });
                },
                fail: function() {
                  wx.showToast({
                    title: '绘制失败'
                  });
                },
                complete: function() {
                  wx.hideLoading();
                  wx.hideToast();
                }
              });
            });
          });
        }
      },
      /**
       * 保存图片
       */
      downLoadBtn() {
        this.downloadFile(this.canvasToTempFilePath, '下载')
      },
      /**
       * 下载图片
       */
      downloadFile(content, fileName) { //下载base64图片
        var base64ToBlob = function(code) {
          let parts = code.split(';base64,');
          let contentType = parts[0].split(':')[1];
          let raw = window.atob(parts[1]);
          let rawLength = raw.length;
          let uInt8Array = new Uint8Array(rawLength);
          for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uInt8Array], {
            type: contentType
          });
        };
        let aLink = document.createElement('a');
        let blob = base64ToBlob(content); //new Blob([content]);
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
      },
      /**
       * 生成海报
       */
      toImg() {
        uni.showLoading({
          title: "海报生成中"
        })
        let dom = document.querySelector('.poster'); // 获取dom元素
        console.log(dom.clientWidth)
        console.log(dom.clientHeight)
        html2canvas(dom, {
          width: dom.clientWidth, //dom 原始宽度
          height: dom.clientHeight,
          scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
          scrollX: 0,
          useCORS: true, //支持跨域，但好像没什么用
        }).then((canvas) => {
          //成功后调用返回canvas.toDataURL返回图片的base64，H5不支持下载base64，PC浏览器测试没问题，可以正常下载。
          this.base64 = canvas.toDataURL('image/png', 1);
          console.log(this.base64)
          uni.hideLoading();
          this.shade = true;
          // this.download(this.base64)
          // 这里简单点，直接吧base64传给后台，后台返回个url链接，用来下载
        });
      },
    }
  }
</script>

<style lang="less">
  .button1 {
    margin: 200rpx auto;
    text-align: center;
  }

  .poster {
    position: fixed;
    left: 5000rpx;
    margin: 0 auto;
    width: 86%;
    height: 950rpx;
    background-image: url(assets/img/buycard1.jpg);
    background-color: red;

    .top {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: flex-start;
      overflow: hidden;

      .top_left {
        margin-top: 20rpx;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }

      .top_right {
        width: 80%;
        padding-top: 20rpx;
        box-sizing: border-box;
      }
    }

    .bottom {
      width: 100%;
      // height: 100rpx;
      display: flex;
      justify-content: flex-start;
      overflow: hidden;

      .top_left {
        margin-top: 20rpx;
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .top_right {
        width: 70%;
        padding-top: 20rpx;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }

    .center {
      margin-top: 20rpx;
      width: 100%;
      height: 600rpx;
      text-align: center;

      image {
        margin: 0 auto;
        width: 90%;
        height: 600rpx;
      }
    }

    .content {
      margin-left: 30rpx;
    }
  }

  .shade {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100vh;

    .img_src {
      margin-top: 100rpx;
      width: 86%;
    }

    .button {
      margin-bottom: 30rpx;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-around;

      view {
        width: 40%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        border-radius: 15rpx;
      }

      .cancel {
        background-color: #fff;
        color: #5BB963;
      }

      .submit {
        background-color: #5BB963;
        color: #fff;
      }
    }
  }
</style>
